<template>
  <div>
  <div class="login">
    <el-header id="plattitles">
      <span> 自己用的测试平台登录页面 </span>
    </el-header>

    <el-main>
      <el-row>
        <el-input
          size="large"
          v-model="data.username"
          type="text"
          placeholder="输入名字"
        />
      </el-row>
      <el-row>
        <el-input
          size="large"
          v-model="data.password"
          type="password"
          placeholder="输入密码"
          show-password
        />
      </el-row>
      <el-row type="flex" justify="end">
        <el-col :span="9" :pull="9">
          <el-link type="primary" @click="register" id="link"
            >没有账号点击此处注册!</el-link
          >
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="loginapi" :loading="load.state">
            <span v-if="load.state == false">登录</span>
          </el-button>
          <!-- <el-link type="primary" @click="loginapi" id="link">denglu</el-link> -->
        </el-col>
      </el-row>
    </el-main>
  </div>
  </div>
</template>
<script>
import { login } from "@/api";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useTodoStore } from "../store/user";
export default {
  name: "MyLogin",
  setup() {
    let data = ref({
      username: "",
      password: "",
    });
    let load = ref({
      state: false,
    });
    let store = useTodoStore();

    console.log(store.name);

    const router = useRouter();

    function loginapi() {
      load.value.state = true;
      console.log(load.value.state);
      login(data.value.username, data.value.password)
        .then((res) => {
          console.log(res);
          if (res.data.code == 0) {
            load.value.state = false;
            window.localStorage.setItem("token", res.data.data.access);
            ElMessage({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            store.$patch({
              name: res.data.data.username,
            });
            console.log(store.name);
            router.push({
              name: "HomePage",
            });
          } else {
            load.value.state = false;
            ElMessage({
              message: res.data.msg,
              type: "error",
              duration: 1000,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
      setTimeout(() => {
        load.value.state = false;
      }, 2000);
    }
    function register() {
      console.log(1232);
      router.push({
        name: "UserRegister",
      });
      console.log(123);
    }

    return {
      data,
      load,
      loginapi,
      register,
    };
  },
};
</script>

<style>
.login {
  width: 400px;
  height: 260px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 1px;
  border-color: #909399;
  border-radius: 5px;
  line-height: 90%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

#plattitles {
  text-align: center;
  position: relative;
  top: 25px;
  border-bottom: none;
}
.el-row {
  margin-bottom: 20px;
}
#link {
  width: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

